
<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>人员定位</h2>
        </div>
      </div>

      <!-- 搜索 -->
        <div class="normal-box-bd">
            <div class="clearfix">
                <Col span="5">
                    <city @ProvinceData="childByValue"></city>
                </Col>
                <Input class="mr-10" placeholder="姓名" v-model="queryData.username" :clearable=true style="width:200px;" />
                <Input class="mr-10" placeholder="地址" v-model="queryData.address" :clearable=true style="width:200px;" />
                <Input class="mr-10" placeholder="电话" v-model="queryData.mobilePhone" :clearable=true style="width:200px;" />
                <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
            </div>
        </div>

      <!-- <Card> -->
        <div id="map"></div>
      <!-- </Card> -->

    </div>
  </div>
</template>
<script>
import gcDispenserApi from "@/api/base_sys/gcDispenser.js";
// import moment from "moment";
import {Message} from "iview";
import city from "@/view/test/city.vue"
import global from '@/assets/js/global'

  export default {
    components: {
      city
    },
    data() {
      return {
        url: '/api/sysHomepagesignin/list',
        map: '',
        // 页面查询数据
        queryData: {
            limit: 10,
            page: 1,
            totalRecord: 0,
            startTime: '2020-01-01',
            endTime: '2020-01-01',
        },
        dataList: []
      }
    },
     created() {
      
      let area = window.defArea
      
      this.queryData.provid = area[0]
      this.queryData.cityid = area[1]
      this.queryData.distid = area[2]
    },
    mounted() {
      this.meadMap()
      this.getTableData();
    },
    methods: {
      // 获取列表
      async getTableData() {
        this.queryData.totalRecord = undefined;
        let result = await gcDispenserApi.getData(this.url,this.queryData)
        let list = result.data.list
        list.map(item=> {
          var point = new BMapGL.Point(item.signlongitude, item.signlatitude) // 创建点位置
          var mark = new BMapGL.Marker(point)   // 创建标记
          this.map.addOverlay(mark)   // 添加标记到地图
          var opts = {  // 创建信息窗口
              width: 200,
              height:100,
              title: item.username
          };
          var infoWindow = new BMapGL.InfoWindow(`地址:${item.signaddress}`, opts);
          mark.addEventListener('click', function () {  // 添加点击事件
            this.map.openInfoWindow(infoWindow, point); // 开启信息窗口
          });
        })

      },

      childByValue(newObject) {
        this.queryData.provid = newObject.provid||'';
        this.queryData.cityid = newObject.cityid||'';
        this.queryData.distid = newObject.distid||'';
        this.queryData.strtid = newObject.strtid||'';
        this.queryData.commid = newObject.commid||'';
        this.queryData.comminid = newObject.comminid||'';
      },

      meadMap() {
        let map = new BMapGL.Map('map');
        map.centerAndZoom(new BMapGL.Point(120.214935,30.256576), 12);
        map.enableScrollWheelZoom(true);
        this.map = map

      },

      //查询
      inQuire() {
		    this.queryData.page=1;
        this.map.clearOverlays()
        this.getTableData();
      },

      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },
      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },
    },


  };
</script>
<style lang="less" scoped>
  #map {
    // width: 80vw;
    height: 70vh;
    background: #000;
  }
</style>
